<template>
	<div>
		<!-- 回款登记弹窗 -->
			<div>
				<el-form class="pt20" style="padding-bottom: 0;" label-width="100px" :model="form" ref="queryForm"
					:inline="true" :rules="rules">
					<el-form-item label="关联客户" prop="customerName">
						<el-input :disabled="customerMes != ''  ? true : false" @focus="chooseCustomer" v-model="form.customerName" placeholder="请选择" clearable
							class="resetInput" style="width: 200px" />
					</el-form-item>
					<el-form-item label="关联订单" prop="relatedOrder">
						<el-input @focus="chooseOrder"
						:disabled="customerMes != ''  ? true : false"
						 v-model="form.relatedOrder" placeholder="请选择" clearable
							class="resetInput" style="width: 200px" />
					</el-form-item>
					<el-form-item label="回款金额" prop="paymentAmount">
						<el-input v-model="form.paymentAmount" placeholder="请输入(元)" clearable class="resetInput"
							style="width: 200px">
						</el-input>
					</el-form-item>
					<el-form-item label="回款日期" prop="paymentDate">
						<el-date-picker v-model="form.paymentDate" value-format="YYYY-MM-DD" type="date" size="large"
							style="width: 200px" />
					</el-form-item>
					<el-form-item label="付款方式" prop="paymentMethod">
						<el-select v-model="form.paymentMethod" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in bus_pay_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="通知人员" prop="notifiedEmployeeId">
						<div>
							<el-select v-model="form.notifiedEmployeeId_" multiple placeholder="请选择" size="large"
								style="width: 200px">
								<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
									:value="dict.userId" />
							</el-select>
							<div class="color-red fs12">注：审批完成后，将自动通知到所选人员</div>
						</div>
					</el-form-item>
					<el-form-item label="备注信息" prop="paymentRemark">
						<el-input size="large" type="textarea" resize="none" class="textReset" style="width: 560px;"
							:rows="5" v-model="form.paymentRemark" placeholder="请输入信息" />
					</el-form-item>
					<el-form-item label="付款截图" prop="paymentScreenshot">
						<el-upload v-if="form.paymentScreenshot == ''" name="file" 
						:limit='1'
						accept=".jpeg,.jpg,.png"
						class="avatar-uploader" :action="url" :headers="headers"
							:show-file-list="false" :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload">
							<div>
								<el-icon class="avatar-uploader-icon">
									<Plus />
								</el-icon>
								<div class="fs12">上传图片</div>
							</div>
						</el-upload>
						<div class="relative" v-else>
							<el-image
							  class="radius8"
							  style="width: 110px; height: 110px"
							  :src="form.paymentScreenshot" 
							  :preview-src-list="[form.paymentScreenshot]">
							</el-image>
							<div 
							@click="form.paymentScreenshot = ''"
							class="absolute fs18 cursor" style="z-index: 1;width: 18px; height: 18px;top: -12px; right: -7px;border-radius: 50%;background-color: #fff;">
								<el-icon><CircleCloseFilled /></el-icon>
							</div>
						</div>	
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="reset()">重 置</el-button>
				<el-button type="primary" @click="recivedSubmit('queryForm')" class="mainSubBtn">确 定</el-button>
			</div>
			<!-- 客户弹窗 -->
			<customerList ref="customerDialog" @customerFunc="customerFunc"></customerList>
			<!-- 订单弹窗 -->
			<orderListPop ref="orderDialog" :customerId="form.customerId" @orderFunc="orderFunc"></orderListPop>
		
	</div>
</template>

<script>
	import {
		getUserListData
	} from "@/api/business/teamOpportunity";
	//订单列表
	import {
		addReceived,
		receivedDetail, //详情
		editReceived //编辑
	} from "@/api/business/received";
	import customerList from "@/components/customer/index.vue"
	import orderListPop from "@/components/order/index.vue"
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	export default {
		components: {
			customerList,
			orderListPop
		},
		props: {
			type:{
				type: Number,
				default: 0
			},
			id: {
				type: String,
				default: ''
			},
			customerMes:{
				type: Object,
				default: res=>{return{}}
			}
		},
		data() {
			return {
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				url: url,
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status, //付款方式
				checkDialog: false,
				notifiedEmployeeId: '', //通知人员
				form: {
					customerId: '', //客户id
					customerName: '', //客户id
					relatedOrder: '', //关联订单
					paymentAmount: '', //回款金额
					paymentDate: '', //回款日期
					paymentMethod: '', //付款方式
					paymentScreenshot: '', //回款截图
					paymentRemark: '', //回款备注
					notifiedEmployeeId:'',
					notifiedEmployeeId_:''
				},
				rules: {
					customerName: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					relatedOrder: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					paymentAmount: [{
						required: true,
						message: '请输入金额',
						trigger: 'blur'
					}],
					paymentDate: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
				},
				teamOptions: [], //业务经理
				type:0,//0新增 1编辑
			}
		},
		watch: {
			type:{
				handler(val) {
					this.type = val
				},
				deep: true, immediate: true
			},
			id:{
				handler(val) {
					console.log(val,'val=====')
					if (val) {
						this.type = 1
						this.getDetail()
					} else {
						this.reset()
					}
				},
				deep: true, immediate: true
			},
			customerMes:{
				handle(val){
					if(val){
						this.reset()
						this.form.customerId = this.customerMes.customerId
						this.form.customerName = this.customerMes.customerName
						this.form.relatedOrder = this.customerMes.orderNumber
					}
				},
				deep: true, immediate: true
			},
		},
		created() {
			this.getUserList()
		},
		methods: {
			reset() {
				this.form = {
					customerId: this.customerMes ? this.customerMes.customerId :'', //客户id
					customerName: this.customerMes ? this.customerMes.customerName :'', //客户名称
					relatedOrder: this.customerMes ? this.customerMes.orderNumber :'', //关联订单
					paymentAmount: '', //回款金额
					paymentDate: '', //回款日期
					paymentMethod: '', //付款方式
					paymentScreenshot: '', //回款截图
					paymentRemark: '', //回款备注
					notifiedEmployeeId: '', //通知人员
					notifiedEmployeeId_: '', //通知人员
				}
			},
			getDetail() {
				receivedDetail(this.id).then(res => {
					if(res.code == 200 && res.data){
						this.form = res.data
						this.notifiedEmployeeId = this.form.notifiedEmployeeId.split(',')
						this.form.notifiedEmployeeId_ = this.form.notifiedEmployeeId.split(',')
					}
				})
			},
			//提交回款
			recivedSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.form.notifiedEmployeeId = this.notifiedEmployeeId ? this.notifiedEmployeeId.join(',') : ''
						if (this.type == 0) {
							//新增
							addReceived(this.form).then(res => {
								if (res.code == 200) {
									this.close()
									this.$modal.msgSuccess("添加成功");
									this.$emit('close')
								}
							})
						} else {
							//编辑
							editReceived(this.form).then(res => {
								if (res.code == 200) {
									this.close()
									this.$modal.msgSuccess("编辑成功");
									this.$emit('close')
								}
							})
						}
					}
				})
			},
			open() {
				this.checkDialog = true
			},
			close() {
				this.checkDialog = false
			},
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});
			},
			// 关联客户
			chooseCustomer() {
				// this.checkDialog = false
				this.$refs.customerDialog.open()
			},
			//关联订单
			chooseOrder() {
				if (this.form.customerId == '') {
					this.$modal.msgError("请先选择客户");
					return false;
				}
				// this.checkDialog = false
				this.$refs.orderDialog.open()
			},
			//获取选中的客户信息
			customerFunc(e) {
				console.log(e, 'e')
				this.form.relatedOrder = ''
				this.form.customerId = e.id
				this.form.customerName = e.name

			},
			// 根据客户id,查找对应订单
			getOrder() {
				orderList(this.form.customerId).then(res => {

				})
			},
			// 选中的订单
			orderFunc(e) {
				this.checkDialog = true
				this.form.relatedOrder = e.orderNumber
				this.$refs.orderDialog.close()
			},
			handleAvatarSuccess(e) {
				this.form.paymentScreenshot = e.url
			},
			beforeAvatarUpload(e) {
				console.log(e, 'e2')
			},
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
</style>